import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
import  {Cookbook}  from './cookbook/index';
import Category from './category/CateGory';
import More from "./more/More";

import cookbook from '@ai/cookbook.png'
import cookbookActive from '@ai/cookbook-active.png'
import menu from '@ai/menu.png'
import menuActive from '@ai/menu-active.png'
import more from '@ai/more.png'
import moreActive from '@ai/more-active.png'
class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab:localStorage.getItem('tabbarkey')|| 'cookbook',
      hidden: false,
      fullScreen: false,
    };
  }
changeTabbar=(tab)=>{
  this.setState({
    selectedTab:tab
  })
  localStorage.setItem('tabbarkey',tab)
}
  render() {
    return (
      <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={this.state.hidden}
          tabBarPosition="bottom"
        >
          <TabBar.Item
            title="菜谱大全"
            key="cookbook"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${cookbook}) center center /  26px 26px no-repeat` }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${cookbookActive}) center center /  26px 26px no-repeat` }}
            />
            }
            selected={this.state.selectedTab === 'cookbook'}
            onPress={() => {
              // this.setState({
              //   selectedTab: 'cookbook',
              // });
              this.changeTabbar('cookbook')
            }}
          >
            <Cookbook />
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${menu}) center center /  21px 21px no-repeat` }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${menuActive}) center center /  21px 21px no-repeat` }}
              />
            }
            title="分类"
            key="category"
            selected={this.state.selectedTab === 'category'}
            onPress={() => {
              // this.setState({
              //   selectedTab: 'category',
              // });
              this.changeTabbar('category')
            }}
            data-seed="logId1"
          >
            <Category />
          </TabBar.Item>
          <TabBar.Item
            icon={{ uri: `${more}` }}
            selectedIcon={{ uri: `${moreActive}` }}
            title="更多"
            key="more"
            selected={this.state.selectedTab === 'more'}
            onPress={() => {
              // this.setState({
              //   selectedTab: 'more',
              // });
              this.changeTabbar('more')

            }}
          >
            <More />
          </TabBar.Item>
        </TabBar>
    );
  }
}

export default Home;
